<template>
  <!--中间部分-->
    <div id="center">
        <div id="cleft">
            <div id="cleft_top">
                图书分类
            </div>
            <div>
                <ul id="cleft_ul">
                    <!--  此处需要从后台读数据       -->
                    <a href="#">
                        <li class="cleft_li">计算机</li>
                    </a>
                </ul>
            </div>
            <div></div>
        </div>


        <!--中间部分-->
        <div id="ccenter">
            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
                <!--   轮播图部分             -->
                <div class="carousel-inner">
                    <div class="carousel-item">
                        <img :src=imgList[current] class="d-block w-100" alt="推送1">
                    </div>
                </div>
               
            </div>


            <!-- 下半部分 -->
            <div id="center_bottom">
                <div id="xinshu">
                    <p style="line-height: 24px; width: 96%; margin: auto; font-size: 18px; font-weight: 600; display: block;">
                        新书上架
                    </p>
                </div>
                <!-- 新书上架轮播 -->
                <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                   
                    <div class="carousel-inner">
                        <Card/>
                    </div>
                    <div>
                       
                    </div>
                </div>
            </div>
        </div>
        <!-- 右边部分 -->
        <div id="cright">
            <div class="card">
                <div class="card-body">
                    <p class="card-text">618大促销！全场5折起！！！</p>
                </div>
            </div>
            <!-- 添加新书预售 -->
            <div id="addBooks">
                <p>新书预售</p>
            </div>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                
                <div class="carousel-inner">
                    <div each="newbook,status:${newBooks}"
                            class="${status.count==1}?'carousel-item active':'carousel-item'">
                        <a href="@{'/book/detail/'+${newbook.bookId}}"><img :src=imgList[0] class="d-block w-100" alt="新书"></a>
                    </div>
                </div>
            </div>

            <!-- 畅销榜 -->
            <div>
                <p style="font-size: 18px; font-weight: 600;text-align: center;margin-top: 45px; padding-bottom: 0px;">
                    畅销榜</p>
            </div>
            <div id="changxb">
                <ul class="nav flex-column" style="float:left;">
                    <!-- 修改字体 -->
                    <!--    此处要读数据十条    -->
                    <li v-for="o in 5" :key="o" class="nav-item changefont" style="margin-left:10px;margin-top:20px;">
                        <a class="nav-link active" href="#" text="fdsag">adsfdsa</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>

<script>

import '@/style/css/home.css'
import $ from 'jquery'
import Card from '@/components/card.vue'

export default {
    name:'Center',
    data(){
        return{
            imgList:[require('@/style/images/消息轮播1.jpg'),
                require('@/style/images/消息轮播2.jpg'),
                require('@/style/images/消息轮播3.jpg')
            ], 
            current:0
        };
    },
    components:{
        Card
    },
    mounted(){
        this.default();
    },
    methods:{
        default:function(){
            window.setInterval(this.changeImg,5000)
        },
        changeImg(){
            this.current++;
            if(this.current==3){
                this.current=0;
            }
        }
    }
}
</script>

<style>
    a{
       text-decoration: none;
    }
    li{
       list-style: none;
    }
</style>